<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第五次作业一</title>
</head>
<body>


<div id="app">
    ￥：<input v-model="commodity"><br>
    $：<input v-model="count"><br>
    <p>
        {{commodity}}人民币等于{{count}}美元
    </p>

</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                commodity: 0,
                count: 0,
                price: 0,
            }
        },
        watch: {
            commodity: {
                handler: function (newValue, oldValue) {
                    this.count = this.commodity / 100 * 14.71
                }
            },
            count: {
                handler: function (newValue, oldValue) {
                    this.commodity = this.count / 14.71 * 100
                }
            }
        }

    }).mount('#app')
</script>
</body>
</html>